<template>
    <view>
        <u-popup :show="drawResultShow" mode="center" overlayOpacity=".8" bgColor="transparent">
            <view class="big_box">
                <view class="top_title_box" style="background-image: url('https://morgan.dingxians.cn/static/kj/0.png');"></view>

                <scroll-view scroll-y style=" height: 700rpx;margin-bottom: 80rpx;">
                    <view class="content_box">
                        <view class="dange_jp_box" :class="'dange_jp_box_' + index"
                            :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/yfs/' + item.box_prize_level + '.png)' }"
                            v-for="(item, index) in prizeList" :key="index">
                            <view class="dengluda_box" :class="'dengluda_box_' + item.box_prize_level">{{
                                
                                item.box_prize_level_name }}</view>
                            <view class="image_box">
                                <image :src="item.box_prize_image" mode="heightFix" />
                            </view>
                            <view class="name_box">{{ item.box_prize_name }}</view>
                            <view class="price_box">{{item.price}}元素</view>
                        </view>
                    </view>
                </scroll-view>
                <view class="anniu_box">
                    <view class="cangku_box" style="background-image: url('https://morgan.dingxians.cn/static/kj/5.png');" @click="gotoin">去仓库
                    </view>
                    <view class="cangku_box" style="background-image: url('https://morgan.dingxians.cn/static/kj/5.png');" @click="accept">收下
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    props: {
        drawResultShow: {
            type: Boolean,
            default: false
        },
        prizeList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {

        }
    },
    methods: {
        accept() {
            this.$emit('accept')
        },
        gotoin() {
            this.$emit('gotoin')
        },

    }
}
</script>
<style lang="scss" scoped>
.big_box {
    width: 750rpx;
    height: 1140rpx;

    .top_title_box {
        width: 526rpx;
        height: 268rpx;
        background-size: 100% 100%;
        margin: auto;
        margin-bottom: 16rpx;
    }

    .content_box {
        width: 100%;
        // height: 700rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-wrap: wrap-reverse;
        padding: 0 30rpx;

        .dange_jp_box {
            width: 210rpx;
            height: 319rpx;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding-top: 30rpx;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            position: relative;

            .dengluda_box {
                position: absolute;
                left: 20rpx;
                top: 20rpx;
                font-family: text1;
                font-weight: bold;
                font-size: 24rpx;
                color: #E7CE18;

                &.dengluda_box_1 {
                    color: #E7CE18;
                }

                &.dengluda_box_2 {
                    color: #D876FC;
                }

                &.dengluda_box_6 {
                    color: #F9B7B1;
                }

                &.dengluda_box_8,.dengluda_box_10 {
                    color: #FEB0D1;
                }
            }

            .image_box {
                width: 131rpx;
                height: 180rpx;
                margin: auto;
                margin-bottom: 26rpx;

                image {
                    height: 100%;
                }
            }

            .name_box {
                width: 100%;
                height: 25rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #FFFFFF;
                line-height: 25rpx;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 9rpx;
                box-sizing: border-box;
                padding: 0 10rpx;
            }

            .price_box {
                width: 100%;
                line-height: 25rpx;
                height: 25rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 26rpx;
                color: #FFEE1F;
                text-align: center;
            }
        }
    }

    .anniu_box {
        width: 100%;
        height: 90rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;

        .cangku_box {
            width: 330rpx;
            height: 90rpx;
            background-size: 100% 100%;
            font-family: text1;
            font-weight: bold;
            font-size: 36rpx;
            color: #FFEDD7;
            line-height: 90rpx;
            text-align: center;
        }
    }
}
</style>